<template>
  <view class="share-box">
    <view class="share-logo"></view>
    <form @submit="onSubmit">
      <view class="form-item-column">
        <view class="title">手机号</view>
        <input
          class="input-value"
          v-model="phone"
          name="phone"
          type="number"
          placeholder="输入手机号"
        />
      </view>
      <view class="form-item-column">
        <view class="title">验证码</view>
        <input
          class="input-box"
          name="code"
          v-model="code"
          type="number"
          placeholder="输入验证码"
        />
        <button class="code-btn" size="mini" @click="startCountdown">
          {{ disabled == true ? countdown + "秒后发送" : "发送验证码" }}
        </button>
      </view>
      <view class="form-item-column">
        <view class="title">公司名</view>
        <input v-model="company" class="input-value" disabled="true" placeholder="公司名" />
      </view>
      <button class="submit-btn" form-type="submit">提交</button>
    </form>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { usergGetSms, getUUID, userAddEnterprise } from "@/api/login/index.js";
import {onLoad} from '@dcloudio/uni-app'

const { proxy } = getCurrentInstance();
const disabled = ref(false);
const countdown = ref(30);
const phone = ref("");
const company = ref("");
const uuID = ref("");
const code = ref("");
const enterpriseId = ref("")

function startCountdown() {
  if (phone.value == "") {
    proxy.modal.msg("请输入手机号");
    return;
  }
  // 获取幂等值
  getUUID({
    phone: phone.value,
  }).then((res) => {
    // console.log(res.data);
    uuID.value = res.data;
    // 获取短信验证码
    usergGetSms({
      mdKey: uuID.value,
      phoneNumberArray: [phone.value],
      templateId: 2053183,
    }).then((res) => {
      if (res.code == 200) {
        countdown.value = 30; // 设置倒计时初始值
        disabled.value = true;
        const timer = setInterval(() => {
          if (countdown.value > 0) {
            countdown.value--; // 每秒减1
          } else {
            clearInterval(timer); // 倒计时结束，清除定时器
            disabled.value = false;
          }
        }, 1000);
      }
      console.log(res);
      proxy.modal.msg(res.msg);
    });
    console.log(uuID.value);
  });
}
function onSubmit(e) {
  if (phone.value == "") {
    proxy.modal.msg("用户名不能为空");
    return;
  }
  if (code.value == "") {
    proxy.modal.msg("验证码不能为空");
    return;
  }
  console.log("form发生了submit事件，携带数据为：" + JSON.stringify(e));
  var formdata = e.detail.value;
  formdata["enterpriseId"] = enterpriseId.value;
  userAddEnterprise(formdata).then((res) => {
    proxy.modal.msg("已成功加入该企业");
  });
}
onLoad((option)=>{
  console.log('option',option)
  if (option && option.name){
    company.value = option.name
  }
  if (option && option.enterpriseId) {
    enterpriseId.value = option.enterpriseId
  }
})
</script>
<style lang="less" scoped>
page {
  background-color: @color-font;
}
.share-box {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  .share-logo {
    width: 415rpx;
    height: 485rpx;
    background-image: @share-logo-img;
    background-size: cover;
    margin: 2% auto;
  }
  .form-item-column {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 15rpx;
    width: calc(90vw - 30rpx);
    margin-left: 5vw;
    .title {
      width: 150rpx;
      font-family: "ali";
    }
    .input-value{
      width: calc(100% - 150rpx);
    }
    .input-box {
      width: calc(100% - 370rpx);
      font-family: "ali";
    }
    .code-btn {
      display: inline-block;
      background-color: #5590f6;
      color: #fff;
      max-width: 200rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .submit-btn {
    background-color: #5590f6;
    color: #fff;
    position: fixed;
    bottom: 5%;
    width: 90%;
    margin-left: 5%;
  }
}
</style>
